<template>
    <van-nav-bar title="购物车" left-text="" left-arrow @click-left="goBack" />

    <van-checkbox-group v-model="checked">
        <div class="cart" v-for="item in cartlist" :key="item.id">
            <van-checkbox :name="item.id"></van-checkbox>
            <van-swipe-cell>
                <van-card :price="item.total" :title="item.product.name" class="goods-card"
                    :thumb="item.product.thumbs_text" @click-thumb="toPageInfo(item.proid)">
                    <template #num>
                        <van-stepper v-model="item.nums" @change="editNums(item)" />
                    </template>
                    <template #desc>
                        <div v-if="item.attrs">
                            <van-tag v-for="items in item.attrs" type="warning" size="medium"
                                style="margin-right: 10px;">{{ items.value }}</van-tag>
                        </div>
                        <div>单价： {{ item.price }}</div>
                    </template>
                </van-card>
                <template #right>
                    <van-button square text="删除" type="danger" class="delete-button" @click="del(item)" />
                </template>
            </van-swipe-cell>
        </div>
    </van-checkbox-group>

    <van-submit-bar :price="total" button-text="提交订单" @submit="onSubmit">
        <van-checkbox v-model="checkedAll" @click="checkedAllEvent">全选</van-checkbox>
    </van-submit-bar>

    <Footer />
</template>

<script setup>
import Footer from '@/components/common/footer.vue';
const { proxy } = getCurrentInstance()
const goBack = () => { proxy.$router.go(-1) }
const LoginUser = reactive(proxy.$cookies.get('LoginUser') ?? {})
const checked = ref([]);
const cartlist = ref([])
const checkedAll = ref(false)
onBeforeMount(() => {
    getCartData()
})

const getCartData = async () => {
    let result = await Api.CartIndex({
        busid: LoginUser.id
    })
    if (result.code == 1) {
        cartlist.value = result.data
        cartlist.value.forEach((item) => {
            if (item.attrs) {
                item.attrs = JSON.parse(item.attrs)
            }
        })
    }
}

const total = computed(() => {
    let num = 0;

    cartlist.value.forEach((item) => {
        if (checked.value.includes(item.id)) {
            num += parseFloat(item.total);
        }
    })

    if (checked.value.length > 0 && checked.value.length >= cartlist.value.length) {
        checkedAll.value = true
    }
    else {
        checkedAll.value = false
    }

    return num * 100;
})

const checkedAllEvent = () => {
    if (checkedAll.value) {
        checked.value = cartlist.value.map((item) => item.id)
    }
    else {
        checked.value = [];
    }
}

const toPageInfo = (id) => {
    proxy.$router.push({
        path: '/product/info',
        query: {
            proid: id
        }
    })
}

const editNums = async (val) => 
{
    let result = await Api.CartEdit({
        busid: LoginUser.id,
        cartid: val.id,
        nums: val.nums
    })
    if (result.code == 1) 
    {
        getCartData()
        success(result.msg);
    }
    else 
    {
        error(result.msg);
    }
}

const onSubmit = () =>{
    if(checked.value.length <= 0)
    {
        toast('请选择购物车商品')
        return false;
    }

    proxy.$router.push({
        path: '/product/confirm',
        query:{
            cartids: checked.value.toString()
        }
    })
}

// 删除
const del = (val) =>{
    console.log(val)
    Dialog({
        message:
            `确认是否删除商品${val.product.name}?`,
    })
        .then(async() => {
            let result = await Api.CartDel({
                busid: LoginUser.id,
                cartid: val.id
            })
            if (result.code == 1) 
            {
                getCartData()
                success(result.msg);
            }
            else 
            {
                error(result.msg);
            }
        })
        .catch(() => { });
}

</script>
<style scoped>
.cart {
    display: flex;
    align-items: center;
    width: 100%;
}

.cart .van-swipe-cell {
    width: 100%;
}

.cart .van-swipe-cell__right .van-button {
    height: 100%;
}

.van-submit-bar {
    bottom: 50px;
}
</style>